<template>
  <div class="code" v-show="value">
    <div class="code_top">
      <img
        src="@/assets/img/login/nav_ic_back_dark@2x.png"
        alt=""
        style="width:44px;margin-right: 10px;"
        @click="goBack"
      />
      <el-input
        v-model="countryCode"
        clearable
        :placeholder="$t('login_search')"
        prefix-icon="el-icon-search"
        @input="
          $event =>
            (countryCode = $event.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, ''))
        "
      ></el-input>
    </div>
    <div style="height:44px;"></div>
    <div
      class="code_content"
      v-for="(item, index) in listData"
      :key="index"
      @click="selectCode(item.code)"
    >
      <div style="display: flex;align-items: center;">
        <span style="font-size: 20px; margin-right: 16px;">{{ item.flag }}</span>
        <span style="text-align: left;color: #646B80;">
          {{ $i18n.locale == "ZH" ? item.name_zh : ($i18n.locale == "VI" ? item.name_vi : item.name) }}
        </span>
      </div>
      <span style="text-align: right;color: #39304d;">+{{ item.code }}</span>
    </div>
    <div v-show="listData.length == 0" class="code_nodata">
      {{ $t("error_empty") }} ~
    </div>
  </div>
</template>

<script>
import phoneCodes from "@/assets/js/phone-codes.json";

export default {
  name: "country-code",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      countryCode: "",
      countryList: phoneCodes
    };
  },
  created() {
    // 使用本地数据，不再从接口获取
  },
  computed: {
    listData() {
      let countryCode = this.countryCode.toLowerCase();
      if (countryCode) {
        //不区分大小写
        let reg = new RegExp(countryCode, "ig");
        document.documentElement.scrollTop = 0;
        // 过滤匹配，有则返回当前，无则返回所有
        return this.countryList.filter(function(e) {
          //匹配所有字段
          return String(e.name + e.name_zh + e.name_vi + e.code).match(reg);
        });
      }
      return this.countryList;
    }
  },
  methods: {
    selectCode(item) {
      this.$emit("select", item);
      this.$emit("input", false);
      this.countryCode = "";
    },
    goBack() {
      this.$emit("input", false);
      this.countryCode = "";
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.code {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4000;
  background: #ffffff;
  .code_top {
    display: flex;
    align-items: center;
    height: 44px;
    position: fixed;
    z-index: 9;
    width: calc(100% - 14px);
    background: #ffffff;
    ::v-deep.el-input__inner {
      height: 32px !important;
      background: #f0f0f2;
      border-radius: 16px;
      font-size: 12px;
      line-height: 32px !important;
      color: #39304d;
      border: none;
    }
    ::v-deep .el-input__inner::placeholder {
      color: #888888;
    }
    ::v-deep.el-input__icon {
      line-height: 32px !important;
      height: 32px !important;
      width: 12px !important;
      display: block;
      color: #888888;
    }
    ::v-deep.el-input__prefix {
      left: 8px !important;
    }
    ::v-deep.el-input__suffix {
      right: 14px !important;
    }
  }

  .code_content {
    width: calc(100% - 56px);
    margin-left: 28px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
  }
  .code_nodata {
    width: calc(100% - 56px);
    margin-left: 28px;
    text-align: center;
    color: #7b7e92;
    font-size: 16px;
    font-weight: 500;
    margin-top: 28px;
  }
}
</style>
